<template>
  <el-dropdown :trigger="'click'" @command="handleClick" size="medium" @visible-change="onMenuChange">
    <el-button icon="el-icon-menu" class="more-btn">
      更多操作
      <i class="el-icon-caret-bottom" ref="rotate"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown" :class="{ en: isEnglish }">
      <el-dropdown-item
        v-for="(item, index) in dropdownItems"
        :key="index"
        :icon="item.icon"
        :style="disabledCondition(item)?{'color':'rgba(255,255,255,0.4)'}:''"
        :command="item.action"
        :disabled="disabledCondition(item)"
      >{{ item.action }}
      </el-dropdown-item
      >
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
    export default {
        props: {
            dropdownItems: {
                type: Array,
                default: () => {
                    return []
                }
            },
            selectList: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        computed: {
            isEnglish() {
                return this.$store.state.language === 'en'
            }
        },
        data() {
            return {}
        },
        methods: {
            handleClick(command) {
                switch (command) {
                    case '编辑':
                        this.$emit('handleEdit', this.selectList[0].id)
                        break
                    case '启用':
                        this.$emit('handleBatchEnable')
                        break
                    case '批量启用':
                      this.$emit('handleBatchEnable')
                      break
                    case '上架':
                        this.$emit('handleBatchEnable')
                        break
                    case '禁用':
                        this.$emit('handleBatchDisable')
                        break
                    case '批量禁用':
                      this.$emit('handleBatchDisable')
                      break
                    case '下架':
                        this.$emit('handleBatchDisable')
                        break
                    case '删除':
                        this.$emit('handleBatchDelete')
                        break
                    case '审核':
                        this.$emit('handleBatchCheck')
                        break
                    case '封禁会员':
                        this.$emit('handleBatchBan')
                        break
                    case '解除封禁':
                        this.$emit('handleBatchUnBan')
                        break
                    case '确认到场':
                        this.$emit('confirmAttend')
                        break
                    case '确认缴费':
                        this.$emit('confirmPay')
                        break
                    case '开始招聘':
                        this.$emit('handleBatchStartRecruit')
                        break
                    case '停止招聘':
                        this.$emit('handleBatchStopRecruit')
                        break
                    case '设置精选':
                        this.$emit('handleBatchSelection')
                        break
                    case '取消精选':
                        this.$emit('handleBatchUnSelection')
                        break
                }
            },
            disabledCondition(item) {
                if (item.action === '启用' || item.action === '上架') {
                    if (!item.key) item.key = 'enabled'
                    return this.selectList.some(i => i[item.key]) || this.selectList.length == 0
                } else if (item.action === '禁用' || item.action === '下架') {
                    if (!item.key) item.key = 'enabled'
                    return this.selectList.some(i => !i[item.key]) || this.selectList.length == 0
                } else if (item.action === '编辑') {
                    return this.selectList.length != 1
                } else if (item.action === '删除') {
                    return this.selectList.length === 0
                } else if (item.action === '审核') {
                    return this.selectList.some(i => i[item.key] === '已处理') || this.selectList.length == 0
                } else if (item.action === '封禁会员') {
                    return this.selectList.some(i => i[item.key] === '会员封禁中') || this.selectList.length == 0
                } else if (item.action === '解除封禁') {
                    return this.selectList.some(i => i[item.key] !== '会员封禁中') || this.selectList.length == 0
                } else if (item.action === '确认到场') {
                    return this.selectList.some(i => i[item.key] !== '未到场') || this.selectList.length == 0
                } else if (item.action === '确认缴费') {
                    return this.selectList.some(i => i[item.key] !== '未缴费') || this.selectList.length == 0
                }else if (item.action === '开始招聘') {
                    return this.selectList.some(i => i[item.key] !== '停止招聘') || this.selectList.length == 0
                }else if (item.action === '停止招聘') {
                    return this.selectList.some(i => i[item.key] !== '招聘中') || this.selectList.length == 0
                }else if (item.action === '设置精选') {
                    // console.log(666666666666666,item.key)
                    return this.selectList.some(i => i[item.key]) || this.selectList.length == 0
                }else if (item.action === '取消精选') {
                    // console.log(77777777,item.key)
                    return this.selectList.some(i => !i[item.key]) || this.selectList.length == 0
                }
            },
            onMenuChange(val) {
                if (val) {
                    this.$refs.rotate.style.transform = 'rotate(180deg)'
                } else {
                    this.$refs.rotate.style.transform = 'rotate(0deg)'
                }
            }
        }
    }
</script>

<style lang="less">
  .el-dropdown-menu {
    /deep/ .el-dropdown-menu__item {
      &.is-disabled {
        color: rgba(255, 255, 255, 0.4);
        cursor: not-allowed;
      }
    }

    &.en {
      width: 120px !important;
    }
  }

  /**
    更多操作下拉箭头动画
   */
  .el-icon-caret-bottom {
    transition: all 0.3s ease;
  }
</style>
